<include file="header"/>
<include file="share_header"/>
<body>
<div class="wraper hasmenu">
	 <div class="head clearfix" style="margin:auto;text-align:center">
        <span class="head-name">充动</span>
    </div>
	<if condition="$hasCharging eq 1 && $websiteInfo">
		<div class="title padding tb-mode">
			<p class="tb-cell">常用网点</p>
			<p class="tb-cell text-right text-12"><span class="circle free"></span> 空闲 <span class="circle busy"></span> 繁忙</p>
		</div>

		<div class="lists show">
			<div class="tb-mode">
				<div class="tb-cell vertical-top dot">
					<span class="iconfont icon-location"></span> {BEESCRM:$websiteInfo['website_name']} <span class="iconfont icon-zhankai up"></span>
					<p class="text-12 text-grey tindent18">空闲 <span class="text-green">{BEESCRM:$remain}</span> | {BEESCRM:$terminalList|count}</p>
				</div>
				<div class="tb-cell text-right getLocation" style="width: 30%"  data-lat="{BEESCRM:$websiteInfo['latitude']}" data-lon="{BEESCRM:$websiteInfo['longitude']}" data-address="{BEESCRM:$websiteInfo['address']}">
					<p id="distance">0.00m</p>
					<p class="iconfont icon-quzheli" ></p>
				</div>
			</div>
			<div class="point-box-container">
				<div class="point-box clearfix">
					<volist name="terminalList" id="vo">
						<if condition="$vo['charging'] eq 1">
							<a href="#" class="point busy">{BEESCRM:$vo.line_num}</a></in>
						<else/>
							<a href="{BEESCRM::U('/charger/chargingproxWd/charge',array('accountId'=>$accountId,'chargingId'=>$vo['charging_id'],'terminalId'=>$vo['terminal_id']))}" class="point free">{BEESCRM:$vo.line_num}</a>
						</if>
					</volist>

					<a href="#" class="hover" id="chargingHref">
						<p class="text-20">{BEESCRM:$lineNum}号桩充电中...</p>
						<!-- <p class="text-12">{BEESCRM:$websiteName} {BEESCRM:$terminalName}号充电桩</p> -->
					</a>

				</div>
				<if condition="count($terminalList)-$remain gt 0">
					<a href="{BEESCRM::U('Charger/chargingproxWd/websiteStatus',array('accountId'=>$accountId,'chargingId'=>$websiteInfo['charging_id'],'websiteId'=>$websiteInfo['website_id'],'distance'=>$distance))}" class="status" style="color: #767676">查看已使用终端状态<span class="iconfont icon-you pull-right"></span></a>
				</if>
			</div>
		</div>
	</if>

	<div class="title padding tb-mode">
		<p class="tb-cell">附近网点</p>
		<if condition="$hasCharging neq 1">
			<p class="tb-cell text-right text-12"><span class="circle free"></span> 空闲 <span class="circle busy"></span> 繁忙</p>
		</if>
	</div>

	<font id="nearList" class="append">

	</font>
	<div class="imgload" id="load">
		<img src="/assets/charger/images/load.gif"/>
		<p>加载中...</p>
	</div>
	<div class="imgload" id="fail" style="display:none">
		<img src="/assets/charger/images/fail.gif"/>
		<p>加载失败</p>
	</div>
	<!--<div class="lists text-center load-more text-grey">查看更多</div>-->
	
	<include file="nav"/>

</div>

<div class="pop-box">
	<div class="guide">
		<div class="point-box-container">
			<div class="point-box clearfix">
				<div class="tips"><img src="/assets/charger/images/tips.png"/></div>
				<a href="javascript:" class="point free">1</a>
				<a href="javascript:"  class="point free">2</a>
				<a href="javascript:"  class="point free">3</a>
				<a href="javascript:"  class="point free">4</a>
				<a href="javascript:"  class="point free">5</a>
				<a href="javascript:"  class="point free">6</a>
				<a href="javascript:"  class="point free">7</a>
				<a href="javascript:"  class="point free">8</a>
				<a href="javascript:"  class="point free">9</a>
				<a href="javascript:"  class="point free">10</a>
				<a href="javascript:"  class="point free">11</a>
				<a href="javascript:"  class="point free">12</a>
				<a href="javascript:"  class="point free">13</a>
				<a href="javascript:"  class="point free">14</a>
				<a href="javascript:"  class="point free">15</a>
				<a href="javascript:"  class="point free">16</a>
			</div>
		</div>
	</div>
</div>

<!--<div class="text-12 text-center text-green padding" style="display: none" id="load_more">加载中...</div>-->


<input type="hidden" name="hasCharging" id="hasCharging" value="{BEESCRM:$hasCharging}" />
<input type="hidden" name="count" id="currentPage" value="0" />
<input type="hidden" name="block" id="block" value="0" />
<input type="hidden" name="isFirstCharging" id="isFirstCharging" value="{BEESCRM:$isFirstCharging}" />
<input type="hidden" name="charging" id="charging" value="{BEESCRM:$charging}" />
<!--<input type="button" id="test" value="test" />-->
<include file="commonJS"/>
<script>
seajs.use('$', function() {
	var height = $('.hover').height();
	$('.hover').css('lineHeight',height + 'px');
	var charging = $("#charging").val();
	//充电中.
	
	if(charging == 1) {
		$("#chargingHref").show();
		
		var url = "{BEESCRM::U('charger/chargingproxWd/charging',array('id' => $chargingLogId,'accountId'=>$accountId,'hideNav' => 1))}";
		//$("#chargingHref").attr('href',url);
		$(document).on('click','.free',function() {
			fm.alert('亲,您还在充电喔~');
		})
		$(document).on('click','.busy',function() {
			fm.alert('亲,您还在充电喔~');
		})
		$("#chargingHref").on('click',function(){
			location.href=url;
		})
	} else {
		$(document).on('click','.busy',function() {
			fm.alert('亲，请戳中空闲桩哟~');
		})
		$(document).on('click','.free',function() {
			
			location.href=$(this).attr('href');
		})
	}


	var isFirstCharging = $("#isFirstCharging").val();
	if(isFirstCharging) {
		$('.pop-box').show();
	}
	$(".pop-box").addClass('show');
	$(document).on('click','.pop-box',function() {
		$(".pop-box").hide();
	})


	$(function(){
		$(document).on("click", ".dot", function(){
			$(this).parents('.lists').toggleClass('show');
			$(this).find('.icon-zhankai').toggleClass('up');
			$(this).parents('.lists').siblings().removeClass('show');
		});
	});

	window.onload=function(){
		//getDistance(30,101.22);//测试
		wx.ready(function(){
			$('.scan_code').on('click',function(){
				wx.scanQRCode({
					needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function (res) {
						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
					}
				});
			})
			var lat = "{BEESCRM:$latitude}";
			var lon = "{BEESCRM:$longitude}";
			if(lat && lon){
				getDistance(lat,lon);
			}else{
				wx.getLocation({
					type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					success: function (res) {
						
						var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
						var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
						console.log(latitude);
						var speed = res.speed; // 速度，以米/每秒计
						var accuracy = res.accuracy; // 位置精度

						if(latitude && longitude){
							getDistance(latitude,longitude);
							
						}else{
	//						alert('地理位置获取失败不能查看网点');
							$('#fail').show();
						}
					  }
					
				})
			}
			//打开地图
		   /* $(document).on('click','.getLocation',function(){
		            wx.openLocation({
		                latitude: $(this).attr('data-lat'), // 纬度，浮点数，范围为90 ~ -90
		                longitude: $(this).attr('data-lon'), // 经度，浮点数，范围为180 ~ -180。
		                name: $(this).attr('data-address'), // 位置名
		                address: $(this).attr('data-address'), // 地址详情说明
		                scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
		                infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
		            });
		    });*/
		})

		//用链接方式直接打开地图
		$(document).on('click','.getLocation',function(){
				   var lat = $(this).attr('data-lat');
				   var lon = $(this).attr('data-lon');
				   var name = $(this).attr('data-address');
		           location.href="http://apis.map.qq.com/uri/v1/marker?marker=coord:"+lat+","+lon+";title:"+name+";addr:"+name+"&referer=myapp";
		    });	
	}


	function getDistance(latitude,longitude){
		var data = {};
		data.latitude = latitude;
		data.longitude = longitude;
		
		$.ajax({
			url:"{BEESCRM::U('/charger/chargingproxWd/getNearWebsite',array('accountId'=>$accountId,'chargingId'=>$chargingId))}",
			type:"post",
			data:data,
			dataType:"json",
			beforeSend: function(){
                   				 //fm.showLoging();
				$('#load').show();
            },
			success:function(data){
								//fm.closeLayer();
				$('#load').hide();
				console.log(data.data.content);
				$("#distance").html(data.data.distance + "km");
				$(".append").append(data.data.content);
				$("#currentPage").val(data.data.currentPage);
				$("#block").val(data.data.block);

				var hasCharging = $("#hasCharging").val();

				if(hasCharging == 0) {
						$(".lists").eq(0).addClass('show');
						$('.lists .dot .icon-zhankai').eq(1).addClass('up');
						
				}
			},
			error:function(data){
				fm.closeLayer();
			}
		})

	}
	/**
	 *
	 * 异步加载附近网点
	 */
	$(window).scroll(function(){
		var scrollTop = $(this).scrollTop();
		var scrollHeight = $(document).height();
		var windowHeight = $(window).height();

		if(scrollTop + windowHeight == scrollHeight){
			var data = {};
			data.latitude = "{BEESCRM:$latitude}";
			data.longitude = "{BEESCRM:$longitude}";
			data.block = $("#block").val();
			data.count = parseInt($("#currentPage").val()) + 1;;
			if(data.block != 0) {
				$("#count").val(parseInt(data.count) + 1);
				$("#block").val(parseInt(data.block) - 1);
				$.ajax({
                    url:"{BEESCRM::U('/charger/chargingproxWd/getNearWebsite',array('accountId'=>$accountId,'chargingId'=>$chargingId))}",
					type:"post",
					data:data,
					dataType:"json",
					beforeSend:function() {
						$('#load_more').show();
					},
					success:function(data){
						console.log(data.data.content);
						$(".append").append(data.data.content);
						
						$("#currentPage").val(data.data.currentPage);
						$("#block").val(data.data.block);
					},
					error:function(){
						fm.alert('附近网点获取失败');
						return false;
					}
				})
			} else {
				/*$('#load_more').show();
				$('#load_more').text('已是最后一条...');*/
			}
		}
	});
})
</script>
</body>
</html>